<template>
  <span>
    <div>
      <template v-if="node.string">
        <h1>
          <i>{{ node.string }}</i>
        </h1>
      </template>

      <template v-if="all_children_is_group">
        <a-row>
          <template v-for="node2 in node.children || {}" :key="node2.nodename">
            <a-col :span="node.col || 12">
              <TagGroupSub
                :model="model2"
                :node="node2"
                :formInfo="formInfo"
                @change="onChange"
              />
            </a-col>
          </template>
        </a-row>
      </template>

      <template v-else>
        <template v-for="node2 in node.children || {}" :key="node2.nodename">
          <template v-if="node2.tagname === 'group'"> todo </template>

          <template v-else>
            <TagNode
              :model="model2"
              :node="node2"
              :formInfo="formInfo"
              @change="onChange"
            />
          </template>
        </template>
      </template>
    </div>
  </span>
</template>

<script setup>
import TagNode from './TagNode.vue'

import { computed } from 'vue'

const props = defineProps(['model', 'node', 'formInfo'])
const emit = defineEmits(['change'])
const model2 = computed({
  get() {
    return props.model || {}
  },

  // eslint-disable-next-line no-unused-vars
  set(val) {
    // state.mVal = {...}
  }
})

function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}

const all_children_is_group = computed(() => {
  const children = props.node.children || {}

  const isgroup = Object.keys(children).reduce((acc, cur) => {
    const one = children[cur]
    return acc && one.tagname === 'group'
  }, true)

  if (Object.keys(children).length) {
    return isgroup
  }

  return false
})
</script>

<style type="text/css"></style>
